/*
 * @Author: tanjunyi
 * @Date: 2023-01-03 18:55:19
 * @LastEditTime: 2023-01-03 18:55:19
 * @Description:
 */
// components/CarNumber/index.js
// eslint-disable-next-line no-undef
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        // 初始传入车牌号
        vehicleNo: {
            type: String,
            value: ''
        },
        // 车牌号位数
        plateLimit: {
            type: Number,
            value: 8
        }
    },
   
    /**
     * 组件的初始数据
     */
    data: {
        numberIsDis: 1, // 输入键盘不可点击 2可点击
        fieldBoardShow: true, // 省键盘
        provincesKeyList: '京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新',
        numberKeyList: '0123456789',
        englishKeyOneList: 'ABCDEFGHJKLMNPQRSTUV',
        englishKeyTwoList: 'WXYZ',
        currentFocus: 0,
        currIndex: 0,
        codeList: [],
        codeReset: []
    },
   
    /**
     * 组件的生命周期
     * ready方法要正确执行需要在父页面中写入当前组件时，wx:if 绑定组件显示属性
     * 组件隐藏之后要注销，否则ready方法只执行一次
     */
    ready: function() {
        let temp = [];
        let reset = [];
        let carLen = this.properties.vehicleNo ? this.properties.vehicleNo.length + 1 : 0;
        if (carLen) {
            let arr = this.properties.vehicleNo.split('');
            arr.forEach(item => {
                temp.push({ value: item });
                reset.push({ value: '' });
            });
            // 解决车牌号异常数据导致的样式问题(车牌号位数不够)
            if (carLen < this.data.plateLimit) {
                let num = this.data.plateLimit - carLen;
                for (let index = 0; index <= num; index++) {
                    temp.push({ value: '' });
                    reset.push({ value: '' });
                }
            }
        } else {
        // 初始化设置数据
            for (let index = 0; index < this.data.plateLimit; index++) {
                temp.push({ value: '' });
                reset.push({ value: '' });
            }
        }
        this.setData({
            codeList: temp,
            codeReset: reset,
            numberIsDis: carLen ? 2 : 1,
            fieldBoardShow: carLen ? false : true,
            currentFocus: carLen,
            currIndex: this.properties.vehicleNo ? this.properties.vehicleNo.length : 0
        });
    },
   
    /**
     * 组件的方法列表
     */
    methods: {
        // 省份键盘
        provinceKeyClick(e) {
            const { val } = e.currentTarget.dataset;
            const { currentFocus, codeList } = this.data;
            let temp = codeList;
            temp[0].value = val;
            this.setData({
                codeList: temp,
                fieldBoardShow: false,
                currIndex: 1,
                numberIsDis: 1,
                currentFocus: currentFocus + 1
            });
        },
   
        //数字键盘不可点击事件
        numberKeyDisabled(e) {
        // 获取组件
        // this.keyboard = this.selectComponent("#keyboard");
            return;
        },
   
        // 数字键盘可点击
        numberKeyEnabled(e) {
            const { currIndex, codeList } = this.data;
            if (currIndex > codeList.length - 1) return;
            const { val } = e.currentTarget.dataset;
            let temp = this.data.codeList;
            temp[currIndex].value = val;
            this.setData({
                codeList: temp,
                currIndex: currIndex + 1,
                currentFocus: currIndex + 1
            });
        },
   
        // 字母键盘点击
        englishKeyClick(e) {
            const { currIndex, codeList } = this.data;
            if (currIndex > codeList.length - 1) return;
            const { val } = e.currentTarget.dataset;
            let temp = this.data.codeList;
            temp[currIndex].value = val;
            this.setData({
                codeList: temp,
                currentFocus: currIndex + 1,
                currIndex: currIndex + 1,
                numberIsDis: 2
            });
        },
   
        // 退格
        backspace: function(e) {
            const { currIndex } = this.data;
            let temp = this.data.codeList;
            if (!currIndex) return;
            temp[currIndex - 1].value = '';
            this.setData({
                codeList: temp,
                currentFocus: currIndex - 1,
                currIndex: currIndex - 1,
                fieldBoardShow: currIndex === 1,
                numberIsDis: currIndex === 2 ? 1 : 2
            });
        },
   
        // 关闭
        closeKeyBoard: function(e) {
            const { codeReset } = this.data;
            this.setData({
                codeList: codeReset,
                currentFocus: 0,
                currIndex: 0,
                fieldBoardShow: true,
                numberIsDis: 1
            });
            this.triggerEvent('close');
        },
   
        // 确定
        confirmKeyBoard: function(e) {
            const { currIndex, codeList } = this.data;
            if (currIndex < 6) return;
            let plate = '';
            codeList.map(item => (plate += item.value));
            this.triggerEvent('finish', plate);
            this.closeKeyBoard();
        }
    }
});